<template>
  <div :id="id" class="playerScore">

  </div>
</template>

<script>
  import {Radar} from "@antv/g2plot";

  export default {
    name: "PlayerScore",
    props:{
      playerScore:{
        type:Array
      }
    },
    data(){
      return {
        chart:"",
        id:Math.random().toString(36).substr(2)
      }
    },
    watch:{
      playerScore(newValue){
        this.chart.changeData(newValue)
      }
    },
    mounted() {
      const data = this.playerScore;
      //实例化图表对象
      this.chart = new Radar(this.id, {
        data,
        autoFit:true,
        // width:150,
        // height:150,
        xField: 'item',
        yField: 'score',
        meta: {
          score: {
            alias: '分数',
            min: 0,
            max: 100,
          },
          item:{
            formatter:(item)=>{
              switch(item){
                case 'passScore':
                  return '传球';
                case 'organizeScore':
                  return '组织';
                case 'attackScore':
                  return '进攻';
                case 'defenseScore':
                  return '防守';
                case 'skillScore':
                  return '技巧';
              }
            },
          }
        },
        xAxis: {
          line: null,
          tickLine: null,
          grid: {
            line: {
              style: {
                lineDash: null,
              },
            },
          },
          label:{
            offset:2,
            labelEmit:false,
            style:{
              fill: 'white',
              fontSize: 22,
              fontWeight:700,
            }
          }
        },
        yAxis: {
          line: null,
          tickLine: null,
          grid: {
            line: {
              type: 'line',
              style: {
                lineDash: null,
              },
            },
          },
          label:null
        },

        lineStyle:{
          fill:'rgba(101, 214, 193, 0.70)',
          stroke:'rgba(101, 214, 193, 0.70)'
        },
        tooltip:{
          showCrosshairs:false,
        }
      });
      this.chart.render();
    }
  }
</script>

<style scoped>
  .playerScore {
    width: 100%;
    height: 98%;
  }
</style>
